<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="发起拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '发起拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<div class="btns">
							<view :class="['btnOut',btnType == 1 ? 'btnOut2' : '']">
								<view class="btn" @click="getDataList(1)">
									<text>发起拼卡</text>
								</view>
							</view>
							<view :class="['btnOut',btnType == 2 ? 'btnOut2' : '']">
								<view class="btn" @click="getDataList(2	)">
									<text>我发起的拼卡</text>
								</view>
							</view>
						</div>
						<div class="itemsBox">
							<view class="items items3" v-if="btnType == 1">
								<view class="item" @click="handleDetails2(item)" v-for="item in dataList" :style="{
											backgroundImage:`url(${getImgUrl('cardCombination/pic9.png')})`
											,
										  }">
									<view class="title">卡台号{{item.counterNo}}</view>

									<view class="statusBox">
										<view class="status">
											{{item.counterStatus == 8 ? '拼卡中' : '未发起'}}
										</view>
									</view>
									<view class="bottom">
										<view class="tips">
											<view class="tip">
												<text>男生门票</text>
												<text>¥{{item.boyTicketNum}}</text>
											</view>
											<view class="tip">
												<text>女生门票</text>
												<text>¥{{item.girlTicketNum}}</text>
											</view>
											<view class="tip">
												<text>最低售卖</text>
												<text>{{item.minNum}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>

							<div class="mine" v-else>
								<div class="topBox">
									<div class="lines">
										<div @click="getDataList(2,1)" :class="['line',btnType2 == 1 ? 'active' : '']">
											今日发起的拼卡
										</div>
										<div @click="getDataList(2,2)" :class="['line',btnType2 == 2 ? 'active' : '']">
											历史发起的拼卡
										</div>
									</div>
								</div>
								<view class="items items3 items4">
									<view class="item" @click="handleDetails(item)" v-for="item in dataList" :style="{
										backgroundImage:`url(${getImgUrl('cardCombination/pic9.png')})`
									  }">
										<view class="title">卡台号{{item.counterNo}}</view>

										<view class="statusBox">
											<view class="state"
												:class="item.shareAuditStatus == 3 ? 'state2'  : item.shareAuditStatus == 0 ? 'state3' : ''">
												<text>{{item.shareAuditStatus == 3 ? '已结束' : item.shareAuditStatus == 0 ? '待审核' : '进行中'}}</text>
											</view>
										</view>
										<div class="time">
											<text>{{formatDateTime(item.createTime)}}</text>
										</div>
										<view class="bottom">
											<view class="tips">
												<view class="tip tip2">
													<text>已参与</text>
													<text>{{item.num || 0}}人</text>
												</view>
												<view class="tip tip2">
													<text>待审核人数</text>
													<text>{{item.auditNum || 0}}人</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</div>
						</div>
					</view>
					<!-- 拼卡详情 -->
					<DiaBox ref="showDiaRef1" @comfireFunc="closeInfoMation" title="发起说明" :isClose="false"
						:show-cancel="false" :showBtns="true">
						<template slot="dia-cont">
							<view class="shareText3">
								<p>亲爱的FOMOxyz官方队长：</p>
								<p class="intent">请严格遵守队长的规则与义务，严格 <br><text class="color">《把控手环复用》</text>，避免<text class="color">《个人分成被窃取》</text>。</p>
								<p class="intent">如遇<text class="color">《手环造假》</text>，第一时间上报客服，<br> <text class="color">《举报奖励500-5000￥》</text>不等。</p>
								<p class="intent">祝您钱途无量。</p>
							</view>
						</template>
					</DiaBox>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight,
		getDateForYmd
	} from "@/utils";
	import {
		getMyJoinedOrderShareApi,
		getOrderParticipateShareCounterApi,
		getOrdershareCounter,
		getMyOrderShareApi
	} from "@/api/api";
	import diaBox from "@/components/diaBox/index.vue"
	export default {
		components: {
			VideoBox,
			diaBox
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			this.generatePastMonths()
			this.getDataList()
			this.showInfoMationDia()
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
				selectTime: '',
				options: [],
				isDone: false,
				total: 0,
				pageParams: {
					pageSize: 10,
					pageNum: 1,
				},
				btnType: 1,
				btnType2: 1,
				choice: '',
				choiceItem: '',
				isFirstFaQi: {
					flag: '是',
					date: ''
				},
			};
		},
		onShow() {
			this.dataList = []
			this.getDataList()
		},
		async onReachBottom() {
			console.log(this.dataList.length, "this.dataList.length");
			if (this.total <= this.dataList.length) {
				this.isDone = true
			}
			if (this.isDone) return

			this.pageParams.pageNum += 1
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			// 显示申明弹窗
			showInfoMationDia() {
				const isFirstFaQi = uni.getStorageSync('isFirstFaQi')
				console.log(isFirstFaQi,"isFirstFaQi");
				// 判断日期是否是今天
				if (isFirstFaQi.flag == '否' && isFirstFaQi.date == getDateForYmd()) this.isFirstFaQi.flag = '否'
				else {
					this.$refs.showDiaRef1.show = true
					// 记录当前时间
					this.timer = Date.now()
					this.isFirstFaQi.flag = '是'
					const date = getDateForYmd()
					this.isFirstFaQi.date = date
					uni.setStorageSync('isFirstFaQi', this.isFirstFaQi)
				}
			},
			closeInfoMation() {
				if (this.isFirstFaQi.flag == '是') {
					// 判断时间是否过去5秒
					if (Date.now() - this.timer < 5000) {
						this.$refs.showDiaRef1.show = true
						uni.$u.toast('阅读5秒可关闭')
					} else {
						const date = getDateForYmd()
						this.isFirstFaQi.flag = '否'
						this.isFirstFaQi.date = date
						this.$refs.showDiaRef1.show = false
						uni.setStorageSync('isFirstFaQi', this.isFirstFaQi)
					}
				} else {
					this.$refs.showDiaRef1.show = false
				}
			},
			getShareStatus(val) {
				if (val == 1) {
					return {
						text: '拼卡中',
						color: 'status'
					}
				} else if (val == 2) {
					return {
						text: '已拒绝',
						color: 'status1'
					}
				} else if (val == 3) {
					return {
						text: '已结束',
						color: 'status1'
					}
				} else if (val == 0) {
					return {
						text: '未审核',
						color: 'status1'
					}
				}
			},
			handlePinka() {
				if (this.choice == '') {
					return uni.$u.toast('请选择卡台')
				}
				if (this.choice.counterStatus == 8) {
					return uni.$u.toast('当前卡台已发起拼卡')
				}
				this.getnav('/pages/mine/cardCombination/initiatedForm?id=' + this.choiceItem.id)
			},
			choiceCounter(item) {
				this.choice = item.counterNo
				this.choiceItem = item
			},
			generatePastMonths() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1

				const months = [];

				for (let month = currentMonth; month >= 1; month--) {
					// 确保月份是两位数格式
					const formattedMonth = month.toString().padStart(2, '0');
					months.push(`${currentYear}-${formattedMonth}`);
				}

				this.options = months.map(item => {
					return {
						value: item,
						label: item
					}
				})

				this.selectTime = this.options[0].value
			},
			getShareParticipateStatus(item) {
				if (item.auditStatus == null) {
					return '进行中'
				} else if (item.shareParticipateInStatus == 1) {
					return '已进场'
				} else if (item.shareParticipateInStatus == 2) {
					return '已离场'
				} else if (item.paymentStatus == 1) {
					return '已付款'
				} else if (item.auditStatus == 0) {
					return '已申请'
				} else if (item.auditStatus == 1) {
					return '已通过'
				} else if (item.auditStatus == 2) {
					return '已拒绝'
				} else if (item.auditStatus == 3) {
					return '已踢出'
				}
			},
			changeTime(e) {
				this.selectTime = e
				this.dataList = []
				this.getDataList()
			},
			formatDateTime(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${
			    String(date.getMonth() + 1).padStart(2, '0')}-${
			    String(date.getDate()).padStart(2, '0')} ${
			    String(date.getHours()).padStart(2, '0')}:${
			    String(date.getMinutes()).padStart(2, '0')}:${
			    String(date.getSeconds()).padStart(2, '0')}`;
			},
			async getDataList(type, val) {
				// if(type == this.btnType && val == this.btnType2) return
				if (type) {
					this.btnType = type
					this.dataList = []
					if (val) {
						this.btnType2 = val
					}
				}
				let res = ''
				if (this.btnType == 2) {
					if (this.btnType2 == 2) {
						this.pageParams.shareAuditStatus = 3
					} else {
						this.pageParams.shareAuditStatus = 0
					}
					res = await getMyOrderShareApi(this.pageParams)
					if (res.code == 200) {
						// if(res.rows.length == this.dataList.length) return
						this.dataList.push(...res.rows)
						this.total = res.total
					}
				} else {
					res = await getOrdershareCounter()
					res.rows = res.rows.filter(item => item.counterStatus != 99 && (item.counterStatus == 1 || item
						.counterStatus == 2))
					this.dataList = res.rows
				}


			},
			handleDetails(item) {
				// if (item.auditStatus === 2) return
				if (this.btnType == 2) {
					this.getnav('/pages/mine/cardCombination/personnelList?id=' + item.id + '&shareAuditStatus=' + item
						.shareAuditStatus)
				} else {
					this.getnav('/pages/mine/cardCombination/details?id=' + item.id)
				}
			},
			handleDetails2(item) {
				if (item.counterStatus == 8) {
					return uni.$u.toast('当前卡台已发起拼卡')
				}
				this.getnav('/pages/mine/cardCombination/initiatedForm?id=' + item.id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shareText3 {
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #fff;
		.intent{
			text-indent: 40rpx;
			margin-top: 10rpx;
		}
	}
	.color{
		color: #0FC6C2;
	}
	.footBtn {
		margin-top: 20rpx;
	}

	.items3 {

		// height: calc(100vh - 500rpx);
		.item {
			// padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			height: 560rpx;

			.time {
				font-weight: 500;
				font-size: 28rpx;
				color: #86909C;
				text-align: center;
			}

			.title {
				margin-top: 223rpx;
				text-align: center;
				font-weight: 400;
				font-size: 60rpx;
				color: #000000;
				text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
				font-family: 'chunlian';
				margin-bottom: 20rpx;
				line-height: 96rpx;
			}

			.statusBox {
				display: flex;
				justify-content: center;
			}

			.status {
				width: 100rpx;
				height: 40rpx;
				// background: rgba(255, 96, 72, 0.5);
				border-radius: 14rpx;
				font-size: 24rpx;
				margin-top: 44rpx;
				border: 2rpx solid #FF6048;
				margin-top: 5rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FF6048;
			}

			.name {
				display: flex;
			}

			.bottom {
				margin-top: 26rpx;

				.tips {
					display: flex;
					justify-content: center;
				}

				.tip {
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;

					text {
						&:nth-child(1) {
							font-weight: 500;
							font-size: 28rpx;
							color: #86909C;
							margin-right: 20rpx;
						}

						&:nth-child(2) {
							font-weight: 500;
							font-size: 28rpx;
							color: #fff;
							text-align: center;
						}
					}
				}

				.tip2 {
					display: flex;
					flex-direction: row;
				}
			}

		}

	}


	.items2 {
		height: calc(100vh - 500rpx);
		/* 模拟毛玻璃背景，你可替换成自己的背景图或渐变 */
		background: linear-gradient(135deg, rgba(61, 130, 135, 0.8) 50%, #303533 100%);
		/* 让内容居中，这里用 grid 布局做 2 列排列，适配截图的排版 */

		padding: 40rpx;
		border-radius: 24rpx;
		/* 关键：毛玻璃效果 */
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		/* Safari 兼容 */
		/* 给容器加个半透明白色遮罩，和 blur 配合更像毛玻璃（可选，根据需求调） */
		box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
		overflow-y: scroll;

		.itemScroll {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 32rpx;
		}

		.item {
			/* 按钮自身的渐变背景，和容器区分开，做出截图里的渐变效果 */
			background: linear-gradient(to right,
					#2b8a9f 0%,
					#43a070 100%);
			color: #fff;
			font-size: 16px;
			padding: 24rpx 48px;
			height: 150rpx;
			border: none;
			border-radius: 80rpx;
			cursor: pointer;
			/* 让按钮内部也带点毛玻璃感（可选，可去掉） */
			backdrop-filter: blur(10rpx);
			-webkit-backdrop-filter: blur(10rpx);
			/* 加个边框点缀（可选，截图里有虚线框，也可用 border 模拟） */
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			&.selected {
				background: linear-gradient(to right,
						#29b8c7 0%,
						#68d35f 100%);
				/* 可选：加个轻微阴影突出选中 */
				box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
			}
		}
	}

	.topBox {
		display: flex;
		justify-content: space-between;
		width: 100%;

		.lines {
			display: flex;
			flex: 1;
			width: 100%;
			position: relative;
			margin-bottom: 50rpx;
			margin-top: 10rpx;

			.line {
				flex: 1;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 44rpx;

				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}

			.active {
				position: relative;

				&::after {
					width: 100%;
					height: 6rpx;
					background: linear-gradient(297deg, #ADFC46 0%, #0FC6C2 100%);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					content: "";
					position: absolute;
					bottom: -30rpx;
					left: 0;
				}
			}

			&::after {
				content: "";
				position: absolute;
				bottom: -30rpx;
				width: 100%;
				height: 6rpx;
				background: rgba(255, 255, 255, 0.14);
				backdrop-filter: blur(10px);
				// border-radius: 4rpx 4rpx 4rpx 4rpx;
				// opacity: 0.51;
			}
		}

		.selectTime {
			width: 200rpx;
		}
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #4d5d66;
			}
		}

		.btnOut2 {
			box-shadow: inset 0rpx 12rpx 50rpx 0rpx #FFFFFF;

			.btn {
				background: linear-gradient(291deg, #0FC6C2 0%, #BEFF02 100%), radial-gradient(104% 104% at 94% 121%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(135% 135% at 5% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
			}
		}



		.btnOut3 {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(249, 118, 9, 0.25);

			.btn {
				background: #f97609;
			}
		}


		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.items {
		.item {
			padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;

			.state {
				width: 100rpx;
				height: 40rpx;
				border-radius: 14rpx;
				background: rgba(255, 96, 72, .3);
				border: 2rpx solid #FF6048;
				display: flex;
				align-content: center;
				justify-content: center;
				margin-top: 44rpx;
				margin-bottom: 22rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FF6048;
				}
			}

			.state2 {
				width: 100rpx;
				height: 40rpx;
				background: rgba(134, 144, 156, 0.3);
				border-radius: 14rpx;
				border: 2rpx solid #86909C;
				display: flex;
				align-content: center;
				justify-content: center;

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #86909C;
				}
			}


			.state3 {
				background-color: rgba(15, 198, 194, 0.3) !important;
				border: 2rpx solid #0fc6c2 !important;

				text {
					color: #2b8a9f !important;
				}
			}
		}
	}

	.items4 {
		.item {
			height: 650rpx;
		}

		.title {
			margin-top: 275rpx;
		}
	}

	.content {
		padding: 32rpx;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>